import { NavBar } from "antd-mobile";
import React, { Component } from "react";
import styles from "./index.module.scss";
import Filter from "./components/Filter";
import SearchBar from "../../components/SearchBar";
import { getCurrentCity } from "../../utils/baiduMap";
import { getHousesCondition, getHousesByParams } from "../../api";
import {
  AutoSizer,
  List,
} from "react-virtualized";
// import HouseItem from '../../components/HouseLtem/index'
// import ListExample from '../../dome/ListExample'
// import axios from 'axios'

export default class ListFound extends Component {
  constructor() {
    super();
    this.state = {
      cityName: "",
      cityArea: "",
      activeIndex: -1,
      // 房屋列表数据
      list: [
        "Brian Vaughn",
        "Brian Vaughn",
        "Brian Vaughn",
        "Brian Vaughn",
        "Brian Vaughn",
        "Brian Vaughn",
        "Brian Vaughn",
        "Brian Vaughn",
      ],
      count: 0,
    };
  }

  // 初始化实例属性
  filters = {};
  //  获取城市Id
  cityId = "";
  // 接收 Filter 组件中的筛选条件数据
  onFilter = (filters) => {
    // 返回页面顶部
    window.scrollTo(0, 0);
    this.filters = filters;
  };
  async componentDidMount() {
    // 获取当前定位城市
    const { label: cityName, value: cityArea } = await getCurrentCity();
    // 获取房屋查询条件
    await getHousesCondition(cityArea);
    // 更新状态
    this.setState({ cityName, cityArea });
    this.listFodata();
  }
  async listFodata() {
    // 用来获取房屋列表数据
    let res = await getHousesByParams({
      cityId: this.cityId,
      ...this.filters,
      start: 1,
      end: 20,
    });
    if (res.status === 200) {
      // const { list, count } = res.data.body;
      // this.setState({ list, count });
    }
  }
  // 渲染列表项方法
  renderHouseItem = ({ key, index, style }) => {
    const { list } = this.state;
    return (
      <div key={key} style={style}>
        {list[index]}
      </div>
    );
  };
  render() {
    const { cityName, list } = this.state;
    return (
      <div className={styles.dest}>
        <div className={styles.filter}>
          {/* 搜索栏 */}
          <div className="styles.body-Top">
            {/* 1.0 头部搜索框 */}
            <NavBar
              mode="light"
              icon={<i className="iconfont icon-back" />}
              onLeftClick={() => {
                this.props.history.goBack();
              }}
            >
              <SearchBar cityName={cityName} />
            </NavBar>
          </div>
          {/* 条件筛选栏 */}
          <Filter callback={this.onFilter} />
          {/* 筛选结果列表 */}
        </div>
        <div className={styles.list_main}>
          {/* 列表 */}
          <AutoSizer>
            {({ height, width }) => (
              <List
                height={height}
                rowCount={list.length}
                rowHeight={120}
                rowRenderer={this.renderHouseItem}
                width={width}
              />
            )}
          </AutoSizer>
        </div>
      </div>
    );
  }
}
